'use client'
import React, { useEffect, useState } from 'react'
import './index.scss'
import { Button, Modal, Input, message, Divider } from 'antd'
import { EditOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons'
import keyStore from '@/app/store/key'
import dataStore from '@/app/store/data'
import { useRouter } from 'next/navigation'
import { GetDatasets, CreateDataset, DeleteDataset, UpdateDataset, LinkWord } from '@/app/api/RAGflow/index'
import { copyToClipboard } from '@/app/hook/copyToClipboard'
const { TextArea } = Input;

export default function page() {

    const { key, RAGFlowKey, setDatase } = keyStore()
    const { RAG } = dataStore()
    const router = useRouter()
    const [datasets, setDatasets] = useState([])
    const [active, setactive] = useState<number>(-1)


    const [visible, setvisible] = useState<boolean>(false)
    const [inputvalue, setinputvalue] = useState<string>('')
    const [description, setdescription] = useState<string>('')
    const [modalType, setmodalType] = useState<string>('push')
    const [deleteid, setdeleid] = useState<string>('')


    useEffect(() => {
        getDatasets()
    }, [])

    const getDatasets = async () => {
        GetDatasets(1, 30, 'create_time', true, '', '', RAGFlowKey).then((res: any) => {
            console.log(res, 'res')
            setDatasets(res.data)
        })
    }


    return (
        <div className='home'>
            <Button className='createbutton' onClick={() => {
                setmodalType('push')
                setvisible(true)
                setinputvalue('')
                setdescription('')
            }}>创建知识库</Button>

            <div className='content'>
                {
                    datasets.map((item: any, index: number) => {
                        return <div className='card' key={item.id} onClick={() => {
                            setDatase(item)
                            router.push(`/pages/datasets/${item.id}`)
                        }}
                            onMouseEnter={() => { setactive(index) }}
                            onMouseLeave={() => { setactive(-1) }}
                        >
                            {
                                <div className='ragflow'>RAGFlow</div>
                            }

                            <div className='cardtitle'>
                                <div className='cardtitle__icon'>
                                    <img src="/word.svg" alt="" />
                                </div>
                                <div className='cardtitle__text'>
                                    <div>{item.name}</div>
                                    <div>{item.document_count}文档 </div>
                                </div>
                            </div>
                            <div className='card__content'>
                                {item.description}
                            </div>
                            {
                                active == index && <div className='operate'>
                                    <CopyOutlined onClick={(e) => {
                                        e.stopPropagation()
                                        copyToClipboard(item.id)
                                        message.success('复制成功')
                                    }} />
                                    <EditOutlined onClick={(e) => {
                                        e.stopPropagation()
                                        setdeleid(item.id)
                                        setmodalType('edit');
                                        setinputvalue(item.name)
                                        setvisible(true)
                                        e
                                    }} />
                                    {/* <DeleteOutlined style={{ color: 'rgb(253, 79, 79)' }} onClick={(e) => {
                                        e.stopPropagation()
                                        setvisible(true)
                                        setdeleid(item.id)
                                        setmodalType('delete');
                                    }} /> */}
                                </div>
                            }
                        </div>
                    })
                }
            </div>


            <Modal className="createui" open={visible} onCancel={() => { setvisible(false) }} title={modalType == 'push' ? '创建知识库' : modalType == 'edit' ? '修改知识库' : '删除知识库'} centered footer={
                [
                    <>
                        <Button onClick={() => setvisible(false)}>取消</Button>
                        {
                            modalType == 'push' && <Button onClick={() => {
                                if (inputvalue == '') return message.error('知识库名称不能为空')
                                const obj = { ...RAG }
                                obj.name = inputvalue
                                obj.description = description
                                CreateDataset(obj, RAGFlowKey).then((res: any) => {
                                    if (res.code == 0) {
                                        message.success('创建成功')
                                        getDatasets()
                                    } else {
                                        message.error(res.message)
                                    }
                                    setvisible(false)

                                })
                            }} type="primary" >确定</Button>
                        }

                        {
                            modalType == 'edit' && <Button onClick={() => {
                                UpdateDataset(deleteid, inputvalue, RAGFlowKey).then((res: any) => {
                                    if (res.code == 0) {
                                        message.success('修改成功')
                                        getDatasets()
                                        setvisible(false)
                                    } else {
                                        message.error(res.message)
                                    }
                                })
                            }}>
                                修改</Button>
                        }

                        {
                            modalType == 'delete' && <Button danger onClick={() => {
                                DeleteDataset(deleteid, RAGFlowKey).then((res: any) => {
                                    if (res.code == 0) {
                                        message.success('删除成功')
                                        getDatasets()
                                        setvisible(false)
                                    } else {
                                        message.error(res.message)
                                    }
                                })
                            }}>删除</Button>
                        }
                    </>
                ]
            }>
                {
                    modalType == 'delete' && <div>删除知识库是不可逆的。用户将无法再访问您的知识库,所有的提示配置和日志将被永久删除。</div>
                }
                {
                    modalType == 'push' && <>
                        <div className="description">
                            空知识库中还没有文档，你可以在今后任何时候上传文档至该知识库。
                        </div>
                        <div>
                            知识库名称
                        </div>
                        <Input value={inputvalue} onChange={(e) => setinputvalue(e.target.value)}></Input>
                        <div>描述</div>
                        <TextArea
                            value={description}
                            onChange={(e) => { setdescription(e.target.value) }}
                            placeholder="数据库描述"
                            style={{ height: 120, resize: 'none' }}
                        />
                    </>}
                {
                    modalType == 'edit' && <>
                        修改知识库 
                        <Input value={inputvalue} onChange={(e) => setinputvalue(e.target.value)}></Input>
                    </>
                }

            </Modal>
        </div>
    )
}

 